GuiDesigner creates a skeleton GUI program, some of which appears in the lower text area.
Select the Toolkit hot button in the main window.
A toolkit of GUI components (called grids) appears along the lower left side of the display.
Select Window New in the toolkit menu bar.
A design window appears in the upper right corner of the display screen.
Enter "First" into the text line near the top of the toolkit.
This names the design window. The name appears in the design window title bar.
Click on the PushButton button in the toolkit.
A double-box "grip" appears in the design window - the movable, resizable "selected grid".
Only one grid can be selected at a time. Selecting one deselects any other.
Click on background or another grid to deselect the selected grid and make it appear normally.
Resize and move the grip in the design window (about 5 dots high and 10 dots wide).
Move by dragging center of grip. Resize by dragging sides or corners of grip.
Position it near the top center of the design window.
Click on the PushButton button in the toolkit again to create another push button.
Position it below your first push button.
Click on your first push button to select it.
The selected grid is always drawn as the resizable grip.
Double click on the grip.
The Appearance window appears next to the toolkit.
Enter "First" in the TextString entry in the Appearance window and press <enter>.
"First" appears on the first push button you created.
Enter "FirstButton" in the GridName entry in the Appearance window and press <enter>.
The button is named "FirstButton", but nothing visible changes.
Click on medium-light colors until you find one you like.
Try a medium-light green or cyan - top row, 11th or 16th color from left.
Click on your second push button to select it.
Your second push button is selected and turns into a grip.
Double click on the grip.
The contents of the Appearance window changes to reflect your second push button.
Set color of second push button, set TextString to "Second", set GridName to "SecondButton".
"Second" appears in your second push button.
Click the Cancel button in the Appearance window to make the Appearance window disappear.
Select Window ToFunction in the toolkit menu bar.
GuiDesigner adds First() and FirstCode() function declarations to your program.
GuiDesigner converts the design window into two functions, First() and FirstCode().
First() is a "grid function" that contains the code that creates and operates your window.
FirstCode() is a "callback function" that responds to important events in your window.
FirstCode() is visible in the lower text area of the main window.
When FirstCode() gets callbacks, the first executable line reports the message and arguments.
Select Window Delete in the toolkit menu bar.
Your design window is deleted and disappears.
Click on the Start hot button.
Your program parses, compiles, runs.
Your window appears in the upper right portion of the display.
The ReportMessage window appears in the upper left portion of the display (for testing only).
Look in ReportMessage window as you click on your "First" and "Second" push buttons.
A "Selection" callback message prints in the ReportMessage window each time you click a button.
The kid argument should be 1 for your "FirstButton" and 2 for your "SecondButton".
Click the Kill hot button in the main window to terminate your program.
toolkit
hot button
PushButton
button
start
hot button
kill
hot button
